<template>
	<view class="page">
		<!-- 导航显示区域开始 -->
		<scroll-view class="scroll-nav-box" scroll-x>
			<view class="nav-box">
				<view class="nav-item" :class="{'selected':navSelected == item.id}" v-for="(item,index) in navList" :key="index" @click="navSelectedChange(item.id)">{{item.name}}</view>
			</view>
		</scroll-view>
		<!-- 导航显示区域结束 -->
		<scroll-view class="scroll-content" scroll-y>
		<detail :iscreateuser="createUser" :isleader="isleader" :info="detailInfo" v-if="navSelected == 1 && detailInfo.id && refreshType == false" @refresh="statusChange"></detail>
		<view class="card-list" v-if="navSelected == 2 && refreshType == false">
			<view class="preview-Card-item" v-for="(item,index) in list" :key="index" @click="privewImage(index)">
				<image class="preview-Card" :src="item" mode="scaleToFill"></image>
			</view>
			<view class="preview-Card-item" v-for="(item,index) in detailInfo.files" :key="index" @click="previewFile(index)">
				<image class="file-icon" src="/static/image/file_icon.png" mode="scaleToFill"></image>
				<view class="text">{{item.fileName}}</view>
			</view>
		</view>
		<card v-if="navSelected == 3 && refreshType == false" @Tap="taskDetail(item.id)" v-for="(item,index) in sonTaskList" :key="item.id" :index="index" :data="item" @message="getmessage(item.id)"></card>
		<view class="flowsheet-item-box" v-if="navSelected == 4 && refreshType == false">
			<flowsheet :data="item" :key="item.id" v-for="(item,index) in detailInfo.remakes"></flowsheet>
		</view>
		<view class="flowsheet-item-box" v-if="navSelected == 5 && refreshType == false">
			<flowsheet :data="item" :key="item.id" v-for="(item,index) in detailInfo.updates" type="update"></flowsheet>
		</view>
		<message v-if="navSelected == 6 && refreshType == false" :Taskid="detailInfo.id"></message>
		</scroll-view>
		<movable-area  class="move-box" v-if="isleader == true || createUser == true">
			<movable-view @click="openedit" x="1000" :y="editPosition.y" class="edit-box" direction="all"><image class="icon" src="/static/image/edit_icon.png" mode="aspectFit"></image></movable-view>
		</movable-area>
		<report :type="type" title="编辑任务" @inputChange="editInputChange" @cancel="canceledit" v-if="editType == true" @confirm="editConfirm"></report>
		<Messagedisalog :Taskid="sonTaskId" v-if="messageType == true" @close="closemessage"></Messagedisalog>
		</view>
</template>

<script>
	import {baseUrl} from '@/utils/request.js';
	import * as api from '@/utils/api.js';
	import {uploadImage,downloadImages} from '@/utils/utils.js';
	import detail from '../component/detail/detail';
	import report from '../component/report/report';
	import card from '../component/card/card';
	import flowsheet from '../component/flowsheet/flowsheet';
	import message from '../component/message/message';
	import Messagedisalog from '../component/disalog/message/message';
	export default {
		components: {
			detail,card,flowsheet,message,report,Messagedisalog
		},
		data() {
			return {
				apiInfo:{// api传参信息
					currentPage:1,
					pageSize:15,
					type:3,
					pTaskId:null
				},
				editPosition:{ // 编辑悬浮按钮坐标
					y:500,
				},
				messageType:false, // 信息弹窗显示状态
				
				editText:'', // 编辑文本内容
				editType:false, // 编辑悬浮窗显示状态
				userInfo:{}, // 用户信息
				isleader:false, // 是否本人负责任务
				createUser:false,// 是否本人创建任务
				detailInfo:{}, //任务详情信息
				navSelected: 1, // 任务详情导航选中id
				list: [], // 图片临时池
				fileList:[], // 附件临时池
				refreshType:false, // 组件更新状态
				sonTaskList:[],// 子任务列表
				sonTaskId:null, // 子任务id
				navList: [ // 任务详情导航列表
					{
						id: 1,
						name: '任务详情'
					},
					{
						id: 2,
						name: '附件'
					},
					{
						id: 3,
						name: '子任务'
					},
					{
						id: 4,
						name: '任务周期'
					},
					{
						id: 5,
						name: '更新记录'
					},
					{
						id: 6,
						name: '消息'
					},
				],
				
			}
		},
		onLoad(option) {
			if(option.id){
				this.apiInfo.pTaskId = option.id;
			}
			
			this.editPosition.y = getApp().globalData.systemInfo.screenHeight * 0.67;
			this.refreshType = true;
			let apiInfo = this.apiInfo;
			this.initTaskDetail({id:apiInfo.pTaskId});
			this.initSonTaskList(apiInfo);
		},
		onShow() {
			let refreshPage = getApp().globalData.refreshPage;
			let selected = getApp().globalData.selected;
			if(selected != null){
				this.navSelected = selected;
				getApp().globalData.selected = null;
			}
			if(refreshPage == 'detail'){
				this.refreshType = true;
				this.sonTaskList = [];
				this.detailInfo = {};
				let apiInfo = this.apiInfo;
				getApp().globalData.refreshPage = null;
				this.initTaskDetail({id:apiInfo.pTaskId});
				this.initSonTaskList(apiInfo);
				
			}
		},
		methods: {
			/**
			 * 校验用户身份
			 */
			AuthCheck:function(data){
				let that = this;
				let userInfo = getApp().globalData.userInfo;
				let isleader = false;
				let createUser = false;
				console.log('userinfo',userInfo);
				userInfo.employee.forEach(result=>{
					if(result.employeeId == data.leaders[0].userId){
						isleader = true;
					}
					if(result.employeeId == data.createUser.userId){
						createUser = true;
					}
				})
				that.isleader = isleader;
				that.createUser = createUser;
				console.log('isleader',that.isleader);
				console.log('createUser',that.createUser);
			},
			/**
			 * 子任务点击消息触发事件
			 */
			getmessage:function(id){
				this.sonTaskId = id;
				this.messageType = true;
			},
			/**
			 * 关闭消息弹窗触发事件
			 */
			closemessage:function(){
				this.messageType = false;
			},
			/**
			 * 初始化任务详情
			 */
			initTaskDetail:function(data){
				let that = this;
				that.fileList = [];
				that.list = [];
				api.taskDetail(data).then(res=>{
					that.detailInfo = res.data;
					if(res.data.images.length > 0){
						res.data.images.forEach(results=>{
							that.taskImage(results.url);
						})	
					}else if(res.data.files.length > 0){
						res.data.files.forEach(results=>{
							that.taskFile(results.url);
						})	
					}
					that.AuthCheck(res.data);
					that.refreshType = false;
					console.log(res.data);
				})
			},
			/**
			 * 前往子任务详情
			 */
			taskDetail:function(id){
				uni.navigateTo({
					url: '/pages/mask/detail/taskDetail?id=' + id
				});
			},
			/**
			 * 初始化子任务列表
			 */
			initSonTaskList:function(data){
				api.TaskmyListPage(data).then(res=>{
					this.sonTaskList = res.data.result;
				})
			},
			/**
			 * 附件图片下载
			 */
			taskImage:function(imageurl){
				imageurl = imageurl.replace("/api/v2/","")
				let that = this;
				let list = that.list;
				uni.downloadFile({
					url: baseUrl + imageurl,
					header:{"Authorization":uni.getStorageSync('token')},
					success:(res)=>{
						console.log('img',res)
						list.push(res.tempFilePath);
						that.list = list;
					},
				});
			},
			/**
			 * 附件文件下载
			 */
			taskFile:function(url){
				let that = this;
				let fileList = that.fileList;
					downloadImages(url).then(res=>{
						fileList.push(res.tempFilePath);
						that.fileList = fileList;
					});
			},
			/**
			 * 编辑任务框文本改变触发事件
			 */
			editInputChange:function(e){
				this.editText = e;
			},
			/**
			 * 编辑任务框提交触发事件
			 */
			async editConfirm(e){
				let that = this;
				let apiInfo = that.apiInfo;
				let data = {images:[],taskId:this.apiInfo.pTaskId,updateDetail:this.editText};
				// uploadImage
				if(e.imgList.length > 0){
					let result;
					for(let i of e.imgList){
						result = await uploadImage(i);
						result = JSON.parse(result);
						if(data.images){
							data.images.push({fileName:result.data.name,"fileType":"1",fileUrl:result.data.url});
						}
					}
				}
				let res = await api.taskUpdate(data);
				this.editText = '';
				uni.showToast({
					title: '编辑成功',
					icon:'none',
					duration: 2000,
					complete:function(){
						that.initTaskDetail({id:apiInfo.pTaskId});
						that.initSonTaskList(apiInfo);
					}
				});
				
			},
			/**
			 * 打开编辑任务框触发事件
			 */
			openedit:function(e){
				this.editType = true;
			},
			/**
			 * 关闭编辑任务框触发事件
			 */
			canceledit:function(){
				this.editText = '';
				this.editType = false;
			},
			/**
			 * 任务状态改变触发事件
			 */
			statusChange:function(){
				this.refreshType = true;
				let apiInfo = this.apiInfo;
				this.initTaskDetail({id:apiInfo.pTaskId});
				this.initSonTaskList(apiInfo);
			},
			/**
			 * 导航改变触发事件 
			 */
			navSelectedChange:function(id){
				this.navSelected = id;
			},
			/**
			 * 预览附件文件触发事件
			 */
			previewFile:function(index){
				let that = this;
				let fileList =that.fileList;
				console.log('fileList',fileList);
				uni.openDocument({
				      filePath: escape(fileList[index]),
				      showMenu: false,
				      success: function (res) {
				        console.log('打开文档成功');
				      },
					  fail:function(err){
						  uni.showToast({
						  	title: '不支持失败文件类型',
							icon:'none',
						  	duration: 2000
						  });
					  },
				    });
			},
			/**
			 * 预览图片触发事件
			 */
			privewImage:function(index){
				let list = this.list;
				uni.previewImage({
					current:index,
					urls:list,
					loop:true,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #fafafc;
	}
	.move-box{
		position: fixed;
		top:0;
		left:20rpx;
		width:calc(100% - 40rpx);
		height:100vh;
		pointer-events: none;
		.edit-box{
			width:80rpx;
			height:80rpx;
			background: rgba(0,0,0,0.8);
			border-radius: 100%;
			display: flex;
			position:relative;
			pointer-events: auto;
			align-items: center;
			justify-content: center;
			z-index: 10;
			.icon{
				width: 60%;
				height:60%;
			}
		}
	}
	.scroll-nav-box {
		width: 100%;
		height: 60rpx;
		background-color: white;

		.nav-box {
			display: flex;
			white-space: nowrap;

			.nav-item {
				padding: 0 25rpx;
				white-space: nowrap;
				width: fit-content;
				color: #929292;
				font-size: 26rpx;
				line-height: 60rpx;
			}
			.selected{
				position: relative;
			}
			.selected::after{
				content: '';
				position: absolute;
				bottom:0;
				left: 0;
				width: 100%;
				height:4rpx;
				background-color: #2fc047;
			}
		}
	}
	.scroll-content{
		width: 100%;
		height: calc(100vh - 60rpx);
		background-color: #efefef;
	}
		
		.card-list{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			width:calc(100% - 40rpx);
			padding:0 20rpx;
		}
		.preview-Card-item{
			width:calc(50% - 30rpx);
			border: 2rpx solid #e1e1e1;
			min-height: 250rpx;
			font-size: 28rpx;
			overflow: hidden;
			.preview-Card {
				width: 100%;
				height: 100%;
				margin-bottom: 20rpx;
			}
			.file-icon{
				width: 60rpx;
				height: 60rpx;
				display: block;
				margin: 0 auto;
				margin-top:60rpx;
			}
			.text{
				text-align: center;
				margin-top: 20rpx;
				font-size: 24rpx;
			}
		}
		.flowsheet-item-box{
			width:calc(100% - 80rpx);
			margin: 0 auto;
			margin-top:40rpx;
		}
</style>
